<script setup lang="ts">

</script>

<template>
  <div class="flex flex-col items-center justify-center w-full gap-[20px]">
    <!--  #######  -->
    <div class="flex items-center justify-center w-full h-[120px] bg-gradient-to-r from-[var(--el-color-primary-light-9)]  to-white border-[1px] border-[#dcdfed]">
      <div class="flex flex-row items-center justify-center w-full h-[80px] gap-4 px-[20px] ">
        <div class="flex flex-row items-center justify-center w-[80px] h-[80px] bg-[#f6f8f9] rounded-full">
          <img src="../../../public/vite.svg" alt="">
        </div>
        <div class="flex flex-col items-center justify-center w-full h-[80px] gap-2">
          <div class="w-full font-bold text-[18px]">上午好 admin，看到您我好开心。</div>
          <div class="w-full text-[14px] text-[#303133]" >🎉 Vue Shop Vite累计完成5种布局，3种主题，无数种颜色搭配，覆盖绝大多数使用场景，大幅提升开发效率。</div>
        </div>
      </div>
    </div>
   <!-- #######   -->
    <div class="flex flex-row gap-[20px] w-full h-[162px]">
        <div class="h-full w-full bg-amber-100 " style="background: linear-gradient(90deg, rgb(77 135 245 / 60%), var(--el-color-primary));" >1</div>
        <div class="h-full w-full bg-amber-200" >2</div>
        <div class="h-full w-full bg-amber-300" >3</div>
        <div class="h-full w-full bg-amber-400" >4</div>
    </div>
    <!-- #######   -->
    <div class="flex flex-row gap-[20px] w-full h-[230px]">
      <div class="h-full w-full bg-amber-100" >1</div>
      <div class="h-full w-full bg-amber-200" >2</div>
    </div>


  </div>

</template>

<style scoped>

</style>